<template>
  <div class="booksNew">
    <h3>新书上市</h3>
    <div class="book" v-for="book in books" :key="book.id">
      <figure>
        <router-link :to="'/book/' + book.id">
          <img :src="book.imgUrl" alt="" />
          <figcaption>
            {{ book.title }}
          </figcaption>
        </router-link>
      </figure>
      <p>
        {{ currency(factPrice(book.price, book.discount)) }}
        <span>
          {{ currency(book.price) }}
        </span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      books: [],
    };
  },
  inject: ["factPrice", "currency"],
  created() {
    this.axios
      .get("/book/new")
      .then((response) => {
        if (response.status == 200) {
          this.loading = false;
          this.books = response.data;
        }
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style scoped>
.booksNew {
  width: 100%;
  text-align: center;
  float: left;
  margin: 20px 0;
}
.booksNew .book {
  display: inline-block;
  width: 19%;
  border-right: 1px solid #e0eee3;
  transition: 0.8s;
}
.booksNew .book:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.356);
}
.booksNew .book:nth-of-type(5) {
  border-right: 1px solid rgba(136, 136, 136, 0);
}
.booksNew .book img {
  width: 130px;
}
.booksNew .book span {
  color: rgba(126, 123, 123, 0.705);
  text-decoration-line: line-through;
}
</style>
